<template>
  <main>
    <div class="mt40">
      单组件封装：
      <p>组件1：modifyComponent</p>
      <div class="toppest" ref="testDivRef">
        home 页 父组件中测试双向绑定：{{ iptModel }}
        <ModifyComponent
          v-model.upper.trim="iptModel"
          size="large"
          :prefix-icon="Search"
          ref="testComponentRef"
        >
          <template #prefix>
            <p>http://input===></p>
          </template>
        </ModifyComponent>
        <button @click="submitData">focus上方input</button>
      </div>
    </div>
    <div class="mt40">
      多组件封装：
      <p>组件2：defineModelTest</p>
      <div class="bottom">
        <DefineModelTest
          v-model:add100.times2P08.times34P0093="initStr"
          v-model="initCity"
        ></DefineModelTest>
        <!-- 这里 v-model:add100 区分了下面的 v-model -->
        <!-- 相当于点击一次按钮就使得输入框增加了 100 * 2.08 * 34.0093 -->
        <br />
        父组件中测试子组件中的组件 1 的双向绑定：<br />
        {{ initStr }}<br />
        父组件中测试子组件中的组件 2 的双向绑定：<br />
        {{ initCity }}<br />
      </div>
    </div>
  </main>
</template>

<script setup>
import { defineAsyncComponent, onMounted, ref } from "vue";
import { Search } from "@element-plus/icons-vue";

// 使用 defineAsyncComponent 创建一个异步组件
const ModifyComponent = defineAsyncComponent(() =>
  import("@/components/modifyComponent.vue")
);
const DefineModelTest = defineAsyncComponent(() =>
  import("@/components/defineModelTest.vue")
);

// 组件1
let iptModel = ref("fsfd");
let testDivRef = ref();

const testComponentRef = ref();

const submitData = () => {
  testComponentRef.value.inputRef.focus();
};

// 组件2
const initStr = ref("dw");
const initCity = ref("New York");

onMounted(() => {
  // 获取外部元素
  console.log(testDivRef.value);
});
</script>

<style lang="scss" scoped>
.toppest {
  width: 570px;
}
.bottom {
  width: 600px;
}
.mt40 {
  margin-top: 40px;
}
</style>
